<script setup lang="ts">
import ThemeSwitch from '@/components/ThemeSwitch.vue';
import { useLocalStorage } from '@vueuse/core';
import { ref } from 'vue';
const activeSection = useLocalStorage('menu-active-section', 'home')
const navLinks = [
  { id: 'home', text: '首页', name: 'home' },
  { id: 'features', text: '特性', name: 'home' },
  { id: 'start', text: '快速开始', name: 'quick-start' },
  { id: 'components', text: '组件', name: 'component-overview' }
]
const theme_boolean = ref(false)
const theme = useLocalStorage('theme', 'light')

const handleChangeTheme = (e: MouseEvent) => {
  theme.value = theme_boolean.value ? 'light' : 'dark'
  const transition = document.startViewTransition(() => {
    document.documentElement.setAttribute('data-theme', theme.value)
  })
  transition.ready.then(() => {
    const { clientX, clientY } = e
    const radius =
      Math.hypot(
        Math.max(clientX, innerWidth - clientX),
        Math.max(clientY, innerHeight - clientY)
      )
    const clipPath = [`circle(10px at ${clientX}px ${clientY}px)`, `circle(${radius}px at ${clientX}px ${clientY}px)`]
    const isDark = theme.value === 'dark'
    if (isDark) clipPath.reverse()
    document.documentElement.animate({ clipPath }, {
      duration: 700, pseudoElement: '::view-transition-new(root)', easing: 'cubic-bezier(0.4, 0, 0.2, 1)'
    });
  }).catch((e: Error) => {
    console.error(e)
  })
}

</script>
<template>
  <nav class="vivid-nav">
    <div class="nav-container">
      <div class="logo" @click="$router.push('/')">
        <span class="logo-text">Vivid</span>
        <span class="logo-ui">UI</span>
      </div>
      <div class="nav-right">
        <div class="theme-switch">
          <ThemeSwitch v-model="theme_boolean" @click="handleChangeTheme" />
        </div>
        <div class="nav-links">
          <a v-for="link in navLinks" :key="link.id" @click="activeSection = link.id; $router.push({ name: link.name })"
            :class="{ active: activeSection === link.id }">
            {{ link.text }}
          </a>
        </div>
      </div>

    </div>
  </nav>

</template>


<style scoped>
.theme-switch {
  cursor: pointer;
}

.logo {
  text-overflow: ellipsis;
  white-space: nowrap;
  display: flex;
  align-items: center;
  cursor: pointer;
  font-weight: 700;
  font-size: 1.5rem;
}

.logo-text {
  color: var(--primary-color);
}

.logo-ui {
  color: var(--accent-color);
}

.vivid-nav {
  top: 0;
  left: 0;
  right: 0;
  background-color: var(--bg-color);
  box-shadow: var(--shadow-sm);
  z-index: 1000;
  transition: var(--transition);
}

.nav-container {
  display: grid;
  grid-template-columns: minmax(12.5rem, 6fr) 25rem;
  justify-content: space-between;
  align-items: center;
  max-width: 95vw;
  margin: 0 auto;
  padding: 1rem 2rem;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.nav-links {
  display: flex;
  gap: 2rem;
  cursor: pointer;

}

.nav-links a {
  position: relative;
  padding: 0.5rem 0;
  transition: var(--transition);
}

.nav-links a:hover {
  color: var(--primary-color);
}

.nav-links a.active {
  color: var(--primary-color);
  font-weight: 600;
}

.nav-links a.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background-color: var(--primary-color);
}
</style>
